<template>
  <section id="feedback" class="observe">
    <div class="container">
      <h2 data-i18n="sec_feedback">用户反馈</h2>
      <p class="subtitle" data-i18n="sec_feedback_desc">他们都在用</p>
      
      <div class="carousel">
        <div class="track" ref="trackRef" :style="{ transform: `translateX(${-currentSlide * 100}%)` }">
          <!-- 用户反馈 1 -->
          <div class="review">
            <div class="rev-head">
              <div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/44.jpg')"></div>
              <div class="rev-info">
                <div class="rev-name" data-i18n="rev1_name">李小美</div>
                <div class="rev-title" data-i18n="rev1_title">内容创作者 · 北京</div>
              </div>
              <div class="rating">
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
              </div>
            </div>
            <div class="review-content">
              <p data-i18n="rev1_content">「以前做一个短视频至少要花半天，现在 15 分钟就能完成，而且质量更高。AI 脚本剪功能特别实用，能自动识别重点，剪辑逻辑很专业。」</p>
            </div>
          </div>
          
          <!-- 用户反馈 2 -->
          <div class="review">
            <div class="rev-head">
              <div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg')"></div>
              <div class="rev-info">
                <div class="rev-name" data-i18n="rev2_name">张大伟</div>
                <div class="rev-title" data-i18n="rev2_title">营销总监 · 上海</div>
              </div>
              <div class="rating">
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star half">★</div>
              </div>
            </div>
            <div class="review-content">
              <p data-i18n="rev2_content">「我们团队每周需要输出大量营销视频，灵犀帮我们将制作时间缩短了 70%。多语言与配音功能让我们的国际营销变得异常简单，一键就能生成多语言版本。」</p>
            </div>
          </div>
          
          <!-- 用户反馈 3 -->
          <div class="review">
            <div class="rev-head">
              <div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/68.jpg')"></div>
              <div class="rev-info">
                <div class="rev-name" data-i18n="rev3_name">王思思</div>
                <div class="rev-title" data-i18n="rev3_title">自媒体博主 · 广州</div>
              </div>
              <div class="rating">
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
              </div>
            </div>
            <div class="review-content">
              <p data-i18n="rev3_content">「作为一个没有剪辑经验的博主，灵犀让我能够独立完成高质量视频制作。模板市场的选择非常丰富，特别是测评类模板对我帮助很大，粉丝数增长了 3 倍。」</p>
            </div>
          </div>
          
          <!-- 用户反馈 4 -->
          <div class="review">
            <div class="rev-head">
              <div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/men/75.jpg')"></div>
              <div class="rev-info">
                <div class="rev-name" data-i18n="rev4_name">陈明远</div>
                <div class="rev-title" data-i18n="rev4_title">产品经理 · 深圳</div>
              </div>
              <div class="rating">
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">☆</div>
              </div>
            </div>
            <div class="review-content">
              <p data-i18n="rev4_content">「我们用灵犀制作产品演示和教程视频，效果远超预期。企业版的协作功能让团队可以无缝协作，大大提高了我们的工作效率。希望未来能有更多行业垂直的模板。」</p>
            </div>
          </div>
        </div>
        
        <div class="carousel-nav">
          <div class="prev" @click="prevSlide">❮</div>
          <div class="progress">
            <div class="bar">
              <div class="fill" :style="{ width: `${(currentSlide + 1) / totalSlides * 100}%` }"></div>
            </div>
            <div class="count">{{ currentSlide + 1 }}/{{ totalSlides }}</div>
          </div>
          <div class="next" @click="nextSlide">❯</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';

// 轮播图状态
const currentSlide = ref(0);
const trackRef = ref(null);
const autoplayInterval = ref(null);
const totalSlides = 4; // 总幻灯片数量

// 切换到下一张幻灯片
const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % totalSlides;
};

// 切换到上一张幻灯片
const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + totalSlides) % totalSlides;
};

// 自动播放
const startAutoplay = () => {
  autoplayInterval.value = setInterval(() => {
    nextSlide();
  }, 5000); // 5秒切换一次
};

// 停止自动播放
const stopAutoplay = () => {
  if (autoplayInterval.value) {
    clearInterval(autoplayInterval.value);
  }
};

// 国际化字典
const i18n = {
  zh: {
    sec_feedback: '用户反馈',
    sec_feedback_desc: '他们都在用',
    rev1_name: '李小美',
    rev1_title: '内容创作者 · 北京',
    rev1_content: '「以前做一个短视频至少要花半天，现在 15 分钟就能完成，而且质量更高。AI 脚本剪功能特别实用，能自动识别重点，剪辑逻辑很专业。」',
    rev2_name: '张大伟',
    rev2_title: '营销总监 · 上海',
    rev2_content: '「我们团队每周需要输出大量营销视频，灵犀帮我们将制作时间缩短了 70%。多语言与配音功能让我们的国际营销变得异常简单，一键就能生成多语言版本。」',
    rev3_name: '王思思',
    rev3_title: '自媒体博主 · 广州',
    rev3_content: '「作为一个没有剪辑经验的博主，灵犀让我能够独立完成高质量视频制作。模板市场的选择非常丰富，特别是测评类模板对我帮助很大，粉丝数增长了 3 倍。」',
    rev4_name: '陈明远',
    rev4_title: '产品经理 · 深圳',
    rev4_content: '「我们用灵犀制作产品演示和教程视频，效果远超预期。企业版的协作功能让团队可以无缝协作，大大提高了我们的工作效率。希望未来能有更多行业垂直的模板。」'
  },
  en: {
    sec_feedback: 'User Feedback',
    sec_feedback_desc: 'What they say',
    rev1_name: 'Lily Li',
    rev1_title: 'Content Creator · Beijing',
    rev1_content: '"It used to take me half a day to make a short video, now I can finish in 15 minutes with better quality. The AI script cutting feature is especially useful, automatically identifying key points with professional editing logic."',
    rev2_name: 'David Zhang',
    rev2_title: 'Marketing Director · Shanghai',
    rev2_content: '"Our team needs to produce a large number of marketing videos every week, and Lingxi has helped us reduce production time by 70%. The multilingual and dubbing features make our international marketing incredibly simple, generating multilingual versions with one click."',
    rev3_name: 'Sisi Wang',
    rev3_title: 'Social Media Influencer · Guangzhou',
    rev3_content: '"As a blogger with no editing experience, Lingxi allows me to independently create high-quality videos. The template market offers a rich selection, especially the review templates which have been tremendously helpful, tripling my follower count."',
    rev4_name: 'Michael Chen',
    rev4_title: 'Product Manager · Shenzhen',
    rev4_content: '"We use Lingxi to create product demonstrations and tutorial videos, with results far exceeding expectations. The collaboration features in the Enterprise version allow our team to work seamlessly together, greatly improving our efficiency. Hope to see more industry-specific templates in the future."'
  },
  es: {
    sec_feedback: 'Comentarios',
    sec_feedback_desc: 'Lo que dicen',
    rev1_name: 'Lily Li',
    rev1_title: 'Creadora de Contenido · Beijing',
    rev1_content: '"Antes me tomaba medio día hacer un video corto, ahora puedo terminarlo en 15 minutos con mejor calidad. La función de corte de guión AI es especialmente útil, identifica automáticamente los puntos clave con lógica de edición profesional."',
    rev2_name: 'David Zhang',
    rev2_title: 'Director de Marketing · Shanghai',
    rev2_content: '"Nuestro equipo necesita producir una gran cantidad de videos de marketing cada semana, y Lingxi nos ha ayudado a reducir el tiempo de producción en un 70%. Las funciones multilingües y de doblaje hacen que nuestro marketing internacional sea increíblemente simple, generando versiones en varios idiomas con un solo clic."',
    rev3_name: 'Sisi Wang',
    rev3_title: 'Influencer · Guangzhou',
    rev3_content: '"Como blogger sin experiencia en edición, Lingxi me permite crear videos de alta calidad de forma independiente. El mercado de plantillas ofrece una rica selección, especialmente las plantillas de reseñas que han sido tremendamente útiles, triplicando mi número de seguidores."',
    rev4_name: 'Michael Chen',
    rev4_title: 'Gerente de Producto · Shenzhen',
    rev4_content: '"Usamos Lingxi para crear demostraciones de productos y videos tutoriales, con resultados que superan las expectativas. Las funciones de colaboración en la versión Enterprise permiten que nuestro equipo trabaje sin problemas, mejorando enormemente nuestra eficiencia. Esperamos ver más plantillas específicas de la industria en el futuro."'
  }
};

// 应用语言
const applyLang = (lang) => {
  const dict = i18n[lang];
  if (!dict) return;
  
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.dataset.i18n;
    if (dict[key]) el.innerHTML = dict[key];
  });
};

// 生命周期钩子
onMounted(() => {
  // 初始化语言
  const savedLang = localStorage.getItem('lang') || 'zh';
  applyLang(savedLang);
  
  // 监听语言变化
  window.addEventListener('storage', (e) => {
    if (e.key === 'lang') {
      applyLang(e.newValue);
    }
  });
  
  // 设置观察器，当元素进入视口时添加reveal类
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('reveal');
        // 当轮播图进入视口时开始自动播放
        if (entry.target.id === 'feedback') {
          startAutoplay();
        }
      } else {
        // 当轮播图离开视口时停止自动播放
        if (entry.target.id === 'feedback') {
          stopAutoplay();
        }
      }
    });
  }, { threshold: 0.12 });
  
  document.querySelectorAll('.observe').forEach(el => {
    observer.observe(el);
  });
  
  // 开始自动播放
  startAutoplay();
});

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  stopAutoplay();
});
</script>

<style scoped>
/* 用户反馈区域样式 */
#feedback {
  padding: 80px 0;
  background: var(--section-alt-bg);
}

h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 16px;
}

.subtitle {
  text-align: center;
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 60px;
}

.carousel {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

#feedback.reveal .carousel {
  opacity: 1;
  transform: translateY(0);
}

.track {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.review {
  min-width: 100%;
  padding: 30px;
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.rev-head {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.rev-info {
  flex: 1;
}

.rev-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.rev-title {
  font-size: 14px;
  color: var(--text-muted);
}

.rating {
  display: flex;
  margin-left: auto;
}

.star {
  color: #ffc107;
  font-size: 18px;
  line-height: 1;
}

.star.half {
  position: relative;
  overflow: hidden;
  width: 0.5em;
}

.review-content {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

.review-content p {
  margin: 0;
}

.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}

.prev, .next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.prev:hover, .next:hover {
  background: var(--hover);
  transform: translateY(-2px);
}

.progress {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0 20px;
}

.bar {
  flex: 1;
  height: 4px;
  background: var(--progress-bg);
  border-radius: 2px;
  overflow: hidden;
  margin-right: 12px;
}

.fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.count {
  font-size: 14px;
  color: var(--text-muted);
  min-width: 40px;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .review {
    padding: 20px;
  }
  
  .rev-head {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .avatar {
    margin-bottom: 12px;
  }
  
  .rating {
    margin-left: 0;
    margin-top: 12px;
  }
  
  h2 {
    font-size: 30px;
  }
  
  .subtitle {
    font-size: 16px;
    margin-bottom: 40px;
  }
  
  .review-content {
    font-size: 15px;
  }
}
</style>